<template>
  <BasicDrawer
    v-bind="$attrs"
    :width="drawerWidth"
    :title="title"
    :show-footer="true"
    @register="registerInnerDrawer"
    @ok="handleSubmit"
    @close="resetForm"
  >
    <BasicForm @register="registerForm" />
  </BasicDrawer>
</template>

<script setup lang="ts">
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { BasicForm, commonRules, FormSchema, useForm } from '@/components/Form';
  import { computed, ref, unref } from 'vue';
  import { userAdd, userUpdate, userInfo } from '@/api/system/user';
  import { useMaxWidthOrDefault } from '@/hooks/web/useSize';
  import dayjs from 'dayjs';

  defineOptions({ name: 'ScheduleDrawer' });

  const emit = defineEmits(['register', 'reload']);

  const drawerSchemas: FormSchema[] = [
    {
      label: '日程ID',
      field: 'scheduleId',
      component: 'Input',
      show: false,
    },
    {
      label: '日期',
      field: 'calendarDate',
      component: 'Input',
      componentProps: {
        disabled: true,
      },
    },
    {
      label: '日程标题',
      field: 'scheduleTitle',
      component: 'Input',
    },
    {
      label: '日程时间',
      field: 'scheduleDateTime',
      colProps: { span: 12 },
      component: 'TimeRangePicker',
      defaultValue: [dayjs('09:00', 'HH:mm'), dayjs('18:00', 'HH:mm')],
      helpMessage: ['日程时间：09:00~18:00'],
      componentProps: {
        placeholder: ['开始时间', '结束时间'],
        format: 'HH:mm',
      },
    },
    {
      label: '关键',
      field: 'scheduleLevel',
      colProps: { span: 12 },
      component: 'Select',
      defaultValue: '1',
      componentProps: {
        options: [
          { label: '一般', value: '1' },
          { label: '关键', value: '2' },
          { label: '重要', value: '3' },
        ],
      },
    },
    {
      label: '重复',
      field: 'scheduleDuplicate',
      colProps: { span: 12 },
      component: 'Select',
      defaultValue: '0',
      componentProps: {
        options: [
          { label: '单次', value: '0' },
          { label: '每天', value: '1' },
          { label: '每周', value: '2' },
          { label: '每月', value: '3' },
          { label: '每年', value: '4' },
          { label: '周一至周五', value: '5' },
          { label: '法定工作日', value: '6' },
        ],
      },
    },
    {
      label: '提醒',
      field: 'scheduleRemind',
      colProps: { span: 12 },
      component: 'Select',
      defaultValue: '0',
      componentProps: {
        options: [
          { label: '不提醒', value: '0' },
          { label: '准点', value: '1' },
          { label: '1分钟前', value: '2' },
          { label: '5分钟前', value: '3' },
          { label: '10分钟前', value: '4' },
          { label: '15分钟前', value: '5' },
          { label: '30分钟前', value: '6' },
          { label: '1小时前', value: '7' },
          { label: '2小时前', value: '8' },
          { label: '12小时前', value: '9' },
          { label: '1天前', value: '10' },
        ],
      },
    },
    {
      label: '地点',
      field: 'scheduleAddress',
      component: 'Input',
    },
    {
      label: '日程描述',
      field: 'scheduleRemark',
      component: 'InputTextArea',
      componentProps: {
        rows: 3,
      },
    },
  ];

  const isUpdate = ref<boolean>(false);
  const drawerWidth = useMaxWidthOrDefault(700);
  const title = computed<string>(() => {
    return isUpdate.value ? '编辑日程' : '新增日程';
  });

  const [registerInnerDrawer, { drawerLoading, closeDrawer }] = useDrawerInner(
    async (data: { calendarDate: string; update: boolean }) => {
      drawerLoading(true);
      const { calendarDate, update } = data;
      isUpdate.value = update;
      // 在这里更新主要是打开编辑/新增 会有一个明显的隐藏/显示效果 不美观
      await updateSchema([
        {
          field: 'userName',
          componentProps: {
            disabled: update,
          },
        },
        {
          field: 'password',
          ifShow: !update,
        },
      ]);
      // 赋值
      await setFieldsValue({ calendarDate });
      drawerLoading(false);
    },
  );

  const [registerForm, { setFieldsValue, resetForm, validate, updateSchema }] = useForm({
    // layout: 'vertical',
    labelWidth: 100,
    name: 'user-drawer',
    showActionButtonGroup: false,
    baseColProps: { span: 24 },
    schemas: drawerSchemas,
  });

  async function handleSubmit() {
    try {
      drawerLoading(true);
      const data = await validate();
      if (unref(isUpdate)) {
        await userUpdate(data);
      } else {
        await userAdd(data);
      }
      emit('reload');
      closeDrawer();
      await resetForm();
    } catch (e) {
    } finally {
      drawerLoading(false);
    }
  }

  // 点击某一天
  const onPanelSelect = () => {
    //scheduleDate.value = calendarValue.value.format('YYYY-MM-DD');
  };
</script>

<style lang="less" scoped>
  :deep(.ant-tag) {
    margin-inline-end: 0;
  }
</style>
